<template>
    <div class="flex justify-center items-center">
        <el-icon>
            <component :size="20" :is="modelValue"/> 
        </el-icon>

        <el-select
         filterable 
         :modelValue="modelValue" 
         class="m-2"
         placeholder="请选择图标"
         @change="handlechange"
          >
          <el-option 
          v-for="item in icons"
          :key="item"
          :label="item"
          :value="item"
          >
          <span style="float: left">
            <el-icon>
                     <component :is="item"/> 
            </el-icon>
          </span>
            <span
                style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
                "
                >{{ item }}</span>
         </el-option>
        </el-select>
    </div>
</template>
<script setup>
import {ref} from 'vue'
// icon全局引入
import * as iconList from '@element-plus/icons-vue'
const icons = ref(Object.keys(iconList))
defineProps({
    modelValue:String
}) 

const emit = defineEmits("update:modelValue")
//把从子组件点击之后得到的数据双向绑定在父组件
const handlechange= (icon) =>{
// console.log(e);
    emit("update:modelValue",icon)
}
</script>